import * as React from 'react'
import { createTheme, ThemeProvider } from '@mui/material/styles'
import useMediaQuery from '@mui/material/useMediaQuery'
import CssBaseline from '@mui/material/CssBaseline'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Link from '@mui/material/Link'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardMedia from '@mui/material/CardMedia'
import { CardActionArea, Grid } from '@mui/material'
import Paper from '@mui/material/Paper'
import { styled } from '@mui/material/styles'
import Navigator from './Navigator'
import Content from './Content'
import Header from './Header'

function Copyright() {
    return (
        <Typography variant="body2" color="text.secondary" align="center">
            {'Copyright © '}
            <Link color="inherit" href="https://mui.com/">
                Your Website
            </Link>{' '}
            {new Date().getFullYear()}.
        </Typography>
    )
}

let theme = createTheme({
    palette: {
        primary: {
            light: '#63ccff',
            main: '#009be5',
            dark: '#006db3',
        },
    },
    typography: {
        h5: {
            fontWeight: 500,
            fontSize: 26,
            letterSpacing: 0.5,
        },
    },
    shape: {
        borderRadius: 8,
    },
    components: {
        MuiTab: {
            defaultProps: {
                disableRipple: true,
            },
        },
    },
    mixins: {
        toolbar: {
            minHeight: 48,
        },
    },
})

theme = {
    ...theme,
    components: {
        MuiDrawer: {
            styleOverrides: {
                paper: {
                    backgroundColor: '#081627',
                },
            },
        },
        MuiButton: {
            styleOverrides: {
                root: {
                    textTransform: 'none',
                },
                contained: {
                    boxShadow: 'none',
                    '&:active': {
                        boxShadow: 'none',
                    },
                },
            },
        },
        MuiTabs: {
            styleOverrides: {
                root: {
                    marginLeft: theme.spacing(1),
                },
                indicator: {
                    height: 3,
                    borderTopLeftRadius: 3,
                    borderTopRightRadius: 3,
                    backgroundColor: theme.palette.common.white,
                },
            },
        },
        MuiTab: {
            styleOverrides: {
                root: {
                    textTransform: 'none',
                    margin: '0 16px',
                    minWidth: 0,
                    padding: 0,
                    [theme.breakpoints.up('md')]: {
                        padding: 0,
                        minWidth: 268.3, //content的宽度
                    },
                },
            },
        },
        MuiIconButton: {
            styleOverrides: {
                root: {
                    padding: theme.spacing(1),
                },
            },
        },
        MuiTooltip: {
            styleOverrides: {
                tooltip: {
                    borderRadius: 4,
                },
            },
        },
        MuiDivider: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgb(255,255,255,0.15)',
                },
            },
        },
        MuiListItemButton: {
            styleOverrides: {
                root: {
                    '&.Mui-selected': {
                        color: '#4fc3f7',
                    },
                },
            },
        },
        MuiListItemText: {
            styleOverrides: {
                primary: {
                    fontSize: 14,
                    fontWeight: theme.typography.fontWeightMedium,
                },
            },
        },
        MuiListItemIcon: {
            styleOverrides: {
                root: {
                    color: 'inherit',
                    minWidth: 'auto',
                    marginRight: theme.spacing(2),
                    '& svg': {
                        fontSize: 20,
                    },
                },
            },
        },
        MuiAvatar: {
            styleOverrides: {
                root: {
                    width: 32,
                    height: 32,
                },
            },
        },
    },
}

const drawerWidth = 256

export default function Paperbase() {
    const [mobileOpen, setMobileOpen] = React.useState(false)
    const isSmUp = useMediaQuery(theme.breakpoints.up('sm'))

    const handleDrawerToggle = () => {
        setMobileOpen(!mobileOpen)
    }

    return (
        <ThemeProvider theme={theme}>
            <Box sx={{ display: 'flex', minHeight: '100vh' }}>
                <CssBaseline />
                <Box
                    component="nav"
                    sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
                >
                    {isSmUp ? null : (
                        <Navigator
                            PaperProps={{ style: { width: drawerWidth } }}
                            variant="temporary"
                            open={mobileOpen}
                            onClose={handleDrawerToggle}
                        />
                    )}

                    <Navigator
                        PaperProps={{ style: { width: drawerWidth } }}
                        sx={{ display: { sm: 'block', xs: 'none' } }}
                    />
                </Box>
                <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
                    <Header onDrawerToggle={handleDrawerToggle} />
                    <Box
                        component="main"
                        sx={{ flex: 40, py: 6, px: 8, bgcolor: '#eaeff1' }}
                    >
                        <Grid container rowSpacing={1} columnSpacing={3}>
                            <Grid xs={4}>
                                <Card sx={{ maxWidth: 360, maxHeight: 500 }}>
                                    <CardActionArea href="https://finance.sina.com.cn/jjxw/2023-06-07/doc-imywmqym3818882.shtml">
                                        <CardMedia
                                            sx={{
                                                maxWidth: 360,
                                                maxHeight: 100,
                                            }}
                                            component="img"
                                            height="140"
                                            image="/微信图片_20230525162819.jpg"
                                            className=""
                                            alt="green iguana"
                                        />
                                        <CardContent>
                                            <Typography
                                                gutterBottom
                                                variant="h5"
                                                component="div"
                                            >
                                                China's export
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                color="text.secondary"
                                            >
                                                Youth means a temperamental predominance
                                                 of courage over timidity, o
                                                f the appetite for adventure over the love of ease. 
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            </Grid>
                            <Grid xs={4}>
                                <Card sx={{ maxWidth: 360, maxHeight: 500 }}>
                                    <CardActionArea>
                                        <CardMedia
                                            sx={{
                                                maxWidth: 360,
                                                maxHeight: 100,
                                            }}
                                            component="img"
                                            height="140"
                                            image="\微信图片_20230525163506.jpg"
                                            className=""
                                            alt="green iguana"
                                        />
                                        <CardContent>
                                            <Typography
                                                gutterBottom
                                                variant="h5"
                                                component="div"
                                            >
                                                Global Manufacturing
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                color="text.secondary"
                                            >
                                               Whether 60 or 16, there is in every human being’s heart the
                                                lure of wonders, the unfailing appetite for what’s n
                                                ext and the joy of the game of living. 
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            </Grid>
                            <Grid xs={4}>
                                <Card sx={{ maxWidth: 360, maxHeight: 500 }}>
                                    <CardActionArea>
                                        <CardMedia
                                            sx={{
                                                maxWidth: 360,
                                                maxHeight: 100,
                                            }}
                                            component="img"
                                            height="140"
                                            image="\微信图片_20230525163636.jpg"
                                            className=""
                                            alt="green iguana"
                                        />
                                        <CardContent>
                                            <Typography
                                                gutterBottom
                                                variant="h5"
                                                component="div"
                                            >
                                                thrilling stories
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                color="text.secondary"
                                            >
                                                All of us have read thrilling stories in which the
                                                hero had only a limited and specified time to live.
                                                Sometimes it was as long as a year,
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            </Grid>
                            <Grid xs={4}>
                                <Card sx={{ maxWidth: 360, maxHeight: 500 }}>
                                    <CardActionArea>
                                        <CardMedia
                                            sx={{
                                                maxWidth: 360,
                                                maxHeight: 100,
                                            }}
                                            component="img"
                                            height="140"
                                            image="\微信图片_20230525163830.png"
                                            className=""
                                            alt="green iguana"
                                        />
                                        <CardContent>
                                            <Typography
                                                gutterBottom
                                                variant="h5"
                                                component="div"
                                            >
                                                faculties and senses
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                color="text.secondary"
                                            >
                                                The same lethargy, I am afraid, 
                                                characterizes the use of all our faculties and senses.
                                                 Only the deaf appreciate hearing, only the blind realize 
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            </Grid>
                            <Grid xs={4}>
                                <Card sx={{ maxWidth: 360, maxHeight: 500 }}>
                                    <CardActionArea>
                                        <CardMedia
                                            sx={{
                                                maxWidth: 360,
                                                maxHeight: 100,
                                            }}
                                            component="img"
                                            height="140"
                                            image="\微信图片_20230525163948.jpg"
                                            className=""
                                            alt="green iguana"
                                        />
                                        <CardContent>
                                            <Typography
                                                gutterBottom
                                                variant="h5"
                                                component="div"
                                            >
                                                Investment Prospects 
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                color="text.secondary"
                                            >
                                               I have often thought it would be a blessing if each huma
                                               n being were stricken blind and deaf for a few da
                                               ys at some time during his early adult life. 
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            </Grid>
                            <Grid xs={4}>
                                <Card sx={{ maxWidth: 360, maxHeight: 500 }}>
                                    <CardActionArea>
                                        <CardMedia
                                            sx={{
                                                maxWidth: 360,
                                                maxHeight: 100,
                                            }}
                                            component="img"
                                            height="140"
                                            image="\微信图片_20230525164051.jpg"
                                            className=""
                                            alt="green iguana"
                                        />
                                        <CardContent>
                                            <Typography
                                                gutterBottom
                                                variant="h5"
                                                component="div"
                                            >
                                                Lizard
                                            </Typography>
                                            <Typography
                                                variant="body2"
                                                color="text.secondary"
                                            >
                                                Lizards are a widespread group
                                                of squamate reptiles, with over
                                                6,000 species, ranging across
                                                all continents except Antarctica
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            </Grid>
                        </Grid>
                    </Box>
                    <Box component="footer" sx={{ p: 2, bgcolor: '#eaeff1' }}>
                        <Copyright />
                    </Box>
                </Box>
            </Box>
        </ThemeProvider>
    )
}
